<template>
  <div class="panel_box">
    <div
      class="detail_panel flex overflow-hidden flex-col w-[100%] h-[100%]"
      v-if="status"
    >
      <!-- 标题 -->
      <div
        class="title_bar flex items-center justify-between p-[6px] h-[40px] font-size-[14px] color-[#ffffff]"
      >
        视频弹窗
        <img
          src="@/assets/6.png"
          @click="status = !status"
          class="w-4 h-4 cursor-pointer"
        />
      </div>

      <video
        controls
        muted
        autoplay
        preload="metadata"
        class="w-[500px] h-[290px] m-5"
      >
        <source src="@/assets/videos/parkCar.mp4" type="video/mp4" />
        您的浏览器不支持视频标签。
      </video>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const status = ref(true);
</script>
<style lang="scss" scoped>
.detail_panel {
  background-position: 50%;
  width: 540px;
  height: 360px;
  background-color: rgba(43, 46, 51, 0.8);

  border-radius: 0px;

  .title_bar {
    height: 29px;
    line-height: 29px;
    background: #060f1c;
  }
}
</style>
